<article class="docs-component" id="docs-{{escape title}}">

<h1 class="docs-page-title">{{ title }}</h1>

<p class="lead docs-page-lead">{{ description }}</p>

<hr>

{{!-- Start container for docs and table of contents --}}
<div class="row">

{{!-- Start container for table of contents --}}
<nav>
  <div class="large-3 large-push-9 columns">
    <ul class="vertical menu docs-sub-menu" data-docs-toc>
      <li class="docs-menu-title">On this page:</li>
    </ul>
    <ul class="vertical menu docs-sub-menu">
      <li class="docs-menu-title">Contribute:</li>
      <li><a href="{{ editLink fileName }}">Edit this Page</a></li>
      <li><a href="{{ issueLink title }}">Report a Bug</a></li>
      {{ sourceLink _adapterData }}
    </ul>
  </div>
</nav>
{{!-- End container for table of contents --}}

{{!-- Start container for docs --}}
<div class="large-9 large-pull-3 columns">

{{ docs }}

{{#if sass}}
<hr>

<section>
  {{#heading 2}}Sass Reference{{/heading}}

  {{#if sass.variable}}
  <section>
    {{#heading 3 'sass-variables'}}Variables{{/heading}}

    <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>

    <table class="docs-variable-table">
      <thead>
        <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
      </thead>
      {{#each sass.variable}}
      <tr>
        <td class="name"><code>${{this.context.name}}</code></td>
        <td>{{sassTypes this.type}}</td>
        <td class="{{toLower this.type}}"><code>{{sassValue this.context.value}}</code></td>
        <td>{{md this.description}}</td>
      </tr>
      {{/each}}
    </table>
  </section>
  {{/if}}

  {{#if sass.mixin}}
  {{#if sass.variable}}<hr>{{/if}}

  <section>
    {{#heading 3 'sass-mixins'}}Mixins{{/heading}}

    <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>

    {{#each sass.mixin}}
    <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
      {{#heading 4}}{{this.context.name}}{{/heading}}

      {{#if this.since}}
        <p class="docs-notice-added">Added in {{this.since.0.version}}</p>
      {{/if}}

      {{#if this.deprecated}}
        <p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p>
      {{/if}}

      <div class="docs-code">
        <pre><code>{{writeMixin this}}</code></pre>
      </div>

      {{md this.description}}

      {{externalLink this.link}}

      {{#if this.parameter}}
      <table class="docs-variable-table">
        <thead>
          <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
        </thead>
        {{#each this.parameter}}
        <tr>
          <td><code>${{this.name}}</code></td>
          <td>{{sassTypes this.type}}</td>
          <td><code>{{sassValue this.default}}</code></td>
          <td>{{md this.description}}</td>
        </tr>
        {{/each}}
      </table>
      {{/if}}
    </section>

    {{#unless @last}}<hr>{{/unless}}

    {{#if sass.function}}
      <hr>
    {{/if}}

    {{/each}}
  </section>
  {{/if}}

  {{#if sass.function}}
  <hr>

  <section>
    {{#heading 3 'sass-functions'}}Functions{{/heading}}

    {{#each sass.function}}
    <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
      {{#heading 4}}{{this.context.name}}{{/heading}}

      {{#if this.since}}
        <p class="docs-notice-added">Added in {{this.since.0.version}}</p>
      {{/if}}

      {{#if this.deprecated}}
        <p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p>
      {{/if}}

      <div class="docs-code">
        <pre><code>{{writeFunction this}}</code></pre>
      </div>

      {{md this.description}}

      {{externalLink this.link}}

      {{#if this.parameter}}
      <table class="docs-variable-table">
        <thead>
          <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
        </thead>
        {{#each this.parameter}}
        <tr>
          <td><code>${{this.name}}</code></td>
          <td>{{sassTypes this.type}}</td>
          <td><code>{{sassValue this.default}}</code></td>
          <td>{{md this.description}}</td>
        </tr>
        {{/each}}
      </table>
      {{/if}}
    </section>

    {{#unless @last}}<hr>{{/unless}}
    {{/each}}
  </section>
  {{/if}}

</section>
{{/if}}

{{#if js}}
<hr>

<section>
  {{#heading 2}}JavaScript Reference{{/heading}}

  {{#each js.class}}
  <section>
    {{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}

    {{md this.description}}

    <div class="docs-code"><pre><code>var elem = new Foundation.{{this.name}}(element, options);</code></pre></div>

    {{#if this.fires}}
      <p><strong>Fires these events:</strong>
      {{#each this.fires}}
        {{this}}
      {{/each}}
      </p>
    {{/if}}

    {{#if this.params}}
    <table class="docs-variable-table">
      <thead>
        <tr><th>Name</th><th>Type</th><th>Description</th></tr>
      </thead>
      {{#each this.params}}
      <tr>
        <td><code>{{this.name}}</code></td>
        <td>{{this.type.names.[0]}}</td>
        <td>{{this.description}}</td>
      </tr>
      {{/each}}
    </table>
    {{/if}}
  </section>
  {{/each}}

  <hr>

  {{#if js.member}}
  <section>
    {{#heading 3 'js-options'}}Plugin Options{{/heading}}

    <p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="#">Learn more about how JavaScript plugins are initialized.</a></p>

    <table class="docs-variable-table">
      <thead>
        <tr><th>Name</th><th>Description</th><th>Example</th></tr>
      </thead>
      {{#each js.member}}
      <tr>
        <td>{{this.name}}</td>
        <td>{{this.description}}</td>
        <td><code>Sample!</code></td>
      </tr>
      {{/each}}
    </table>
  </section>
  {{/if}}

  <hr>

  {{#if js.event}}
  <section>
    {{#heading 3 'js-events'}}Events{{/heading}}

    <p>These events will fire from any element with a {{title}} plugin attached.</p>

    <table class="docs-variable-table">
      <thead>
        <tr><th>Name</th><th>Description</th></tr>
      </thead>
      {{#each js.event}}
        <tr>
          <td>{{this.name}}.zf.{{../title}}</td>
          <td>{{this.description}}</td>
        </tr>
      {{/each}}
    </table>
  </section>
  {{/if}}

  <hr>

  {{#if js.function}}
  <section>
    {{#heading 3 'js-functions'}}Functions{{/heading}}

    {{#each js.function}}
    <section>
      {{#heading 4 'js-class'}}{{../../js.class.0.name}}.{{this.name}}{{/heading}}

      {{md this.description}}

      {{#if this.fires}}
        <p><strong>Fires these events:</strong>
        {{#each this.fires}}
          {{this}}
        {{/each}}
        </p>
      {{/if}}

      {{#if this.params}}
      <table class="docs-variable-table">
        <thead>
          <tr><th>Name</th><th>Type</th><th>Description</th></tr>
        </thead>
        {{#each this.params}}
        <tr>
          <td><code>{{this.name}}</code></td>
          <td>{{this.type.names.[0]}}</td>
          <td>{{this.description}}</td>
        </tr>
        {{/each}}
      </table>
      {{/if}}

      {{#unless @last}}<hr>{{/unless}}
    </section>
    {{/each}}
  </section>
  {{/if}}
</section>
{{/if}}

{{#if sass}}
<hr>

<section class="docs-building-blocks">
  {{#heading 2 'building-blocks'}}Building Blocks using {{title}}{{/heading}}

  <p><a href="https://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>

  <div class="row up-1 medium-up-2 large-up-3" data-building-blocks>
    
  </div>
</section>
{{/if}}

</div>
{{!-- End container for docs --}}

</div>
{{!-- End container for docs and table of contents --}}

</article>
